<template>
	<view class="home-container page-container tabbar-page">
		<!-- 自定义导航栏 -->
		<view class="custom-nav">
			<view class="nav-left">
				<u-image :src="$tools.buildUrl(dealerInfo.shop_logo || '/static/images/logo.png')" class="menu-icon"
					width="24" height="24" />
				<text class="app-title">{{dealerInfo.shop_name || '茶船古道梧州六堡茶'}}</text>
			</view>
		</view>

		<!-- 搜索框区域 -->
		<view class="search-section">
			<view class="search-bar">
				<text class="search-icon">🔍</text>
				<input class="search-input" placeholder="搜索商品" @input="onSearchInput" @confirm="onSearch" />
				<view class="search-btn" @click="onSearch">
					<text class="search-btn-text">搜索</text>
				</view>
			</view>
		</view>

		<!-- 产品展示区域 -->
		<view class="product-showcase">
			<view class="showcase-content">
				<!-- 产品展示 -->
				<view class="carousel-container">
					<swiper class="main-carousel" :indicator-dots="true" :autoplay="true" :interval="3000"
						:duration="1000">
						<swiper-item v-for="(item, index) in swiperList" :key="item.id" class="carousel-item"
							@click="toProductDetail(item)">
							<image :src="$tools.buildUrl(item.long_pic_url)" mode="aspectFill" class="carousel-image">
							</image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>

		<!-- 主横幅展示区域 -->
		<!-- <view class="main-banner">
			<view class="banner-wrapper">
				<block v-if="swiperList && swiperList.length>0">
					<view v-for="(item, index) in swiperList" :key="index" class="banner-container"
						@click="toProductDetail(item)">
						<image :src="$tools.buildUrl(item.long_pic_url)" mode="aspectFill" class="banner-image" />
					</view>
				</block>
				<view v-else class="banner-placeholder">
					<text class="placeholder-text">茶船古道</text>
					<text class="placeholder-subtitle">匠心典藏，岁月精香</text>
				</view>
			</view>
		</view> -->

		<!-- 介绍图片区域 -->
		<!-- <view class="intro-images-section">
			<image src="@/static/images/mobile-service.png" mode="widthFix" class="service-image"></image>
		</view> -->

		<!-- 分类网格 -->
		<view class="mobile-category-wrap">
			<view class="category-grid">
				<view v-for="(category, index) in displayCategories" :key="index" class="mobile-category-item"
					@click="toCategory(category)">
					<view class="icon-circle">
						<image :src="$tools.buildUrl(category.group_icon)" mode="aspectFit"></image>
					</view>
					<text>{{ category.group_name }}</text>
				</view>
			</view>
		</view>

		<!-- 茶叶产品展示区域 -->
		<view class="product-section container">
			<view class="section-header">
				<text class="section-title">活动热卖</text>
				<text class="more-btn" @click="toCategory">解锁更多活动 >></text>
			</view>
		</view>
		<view class="tea-products-section">
			<view class="tea-products-swiper-container-mobile">
				<swiper class="tea-products-swiper-mobile" :indicator-dots="true" :autoplay="true" :interval="4000"
					:duration="1000" :circular="true" previous-margin="20rpx" next-margin="20rpx">
					<swiper-item v-for="(product, index) in teaProducts" :key="index" class="tea-swiper-item-mobile">
						<view class="tea-product-card"
							:style="{ backgroundImage: `url(${$tools.buildUrl(product.white_back_ground_pic_url)})` }"
							@click="toProductDetail(product)">
							<view class="tea-product-content">
								<text class="tea-product-title">{{ product.spu_name }}</text>
								<text class="tea-product-desc">{{ product.sku_name }}</text>
								<view class="tea-product-footer">
									<text class="tea-product-price">￥{{ product.price_min }}元/份</text>
									<button class="tea-product-btn" @click.stop="toBuyNow(product)">立即购买</button>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 新品上市 -->
		<view class="product-section container">
			<view class="section-header">
				<text class="section-title">新品上市</text>
				<text class="more-btn" @click="toCategory">查看更多 >></text>
			</view>
		</view>
		<view class="tea-products-section">
			<view class="tea-products-swiper-container-mobile">
				<swiper class="tea-products-swiper-mobile" :indicator-dots="true" :autoplay="true" :interval="5000"
					:duration="1000" :circular="true" previous-margin="20rpx" next-margin="20rpx">
					<swiper-item v-for="(product, index) in newProducts" :key="index" class="tea-swiper-item-mobile">
						<view class="tea-product-card"
							:style="{ backgroundImage: `url(${$tools.buildUrl(product.white_back_ground_pic_url)})` }"
							@click="toProductDetail(product)">
							<view class="tea-product-content">
								<text class="tea-product-title">{{ product.spu_name }}</text>
								<text class="tea-product-desc">{{ product.product.sku_name }}</text>
								<view class="tea-product-footer">
									<text class="tea-product-price">￥{{ product.price_min }}元/份</text>
									<button class="tea-product-btn" @click.stop="toBuyNow(product)">立即购买</button>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 移动端优惠券区域 -->
		<view class="coupon-images-section">
			<view class="coupon-images-container">
				<div class="coupon-images-container">
					<div v-for="(item, index) in couponList" :key="index" @click="toCoupon" class="coupon-card">
						<div class="coupon-left">
							<div class="coupon-amount">
								<span class="currency"
									v-if="item.content_type === 1 || item.content_type === 2">¥</span>
								<span class="amount"
									v-if="item.content_type === 1 || item.content_type === 2">{{ item.coupon_amount }}</span>
								<span class="amount"
									v-else-if="item.content_type === 3">{{ item.coupon_amount }}折</span>
							</div>
							<div class="coupon-condition" v-if="item.content_type === 1">优惠券满{{ item.threshold }}元使用
							</div>
							<div class="coupon-condition" v-else-if="item.content_type === 2">商品立减券</div>
							<div class="coupon-condition" v-else-if="item.content_type === 3">商品折扣券</div>
						</div>
						<div class="coupon-right">
							<div class="coupon-action">立即领取</div>
						</div>
					</div>
				</div>
			</view>
		</view>

		<!-- 茶叶产品横幅展示模块 -->
		<block v-for="(item, index) in showcaseProducts" :key="index">
			<block v-if="item.itemArray && item.itemArray.length>0">
				<view class="product-section container">
					<view class="section-header">
						<text class="section-title">{{ item.group_name }}</text>
						<text class="more-btn" @click="toCategory(item)">查看更多 >></text>
					</view>
				</view>
				<block v-if="item.show_type===1">
					<!-- 轮播模式 -->
					<view class="tea-products-section">
						<view class="tea-products-swiper-container-mobile">
							<swiper class="tea-products-swiper-mobile" :indicator-dots="true" :autoplay="true"
								:interval="5000" :duration="1000" :circular="true" previous-margin="20rpx"
								next-margin="20rpx">
								<swiper-item v-for="(product, productIndex) in item.itemArray" :key="productIndex"
									class="tea-swiper-item-mobile">
									<view class="tea-product-card"
										:style="{ backgroundImage: `url(${$tools.buildUrl(product.white_back_ground_pic_url)})` }"
										@click="toProductDetail(product)">
										<view class="tea-product-content">
											<text class="tea-product-title">{{ product.spu_name }}</text>
											<text class="tea-product-desc">{{ product.product.sku_name }}</text>
											<view class="tea-product-footer">
												<text class="tea-product-price">￥{{ product.price_min }}元/份</text>
												<button class="tea-product-btn"
													@click.stop="toBuyNow(product)">立即购买</button>
											</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</block>
				<block v-else-if="item.show_type===2">
					<!-- 横幅模式 -->
					<!-- 第一个商品显示为横幅 -->
					<view v-if="item.itemArray.length > 0" class="tea-banner-section"
						@click="toProductDetail(item.itemArray[0])">
						<view class="tea-banner-container"
							:style="{backgroundImage: `url(${item.back_ground_image && item.back_ground_image!=''?$tools.buildUrl(item.back_ground_image):$tools.buildUrl(item.itemArray[0].white_back_ground_pic_url)})`}">
							<view class="tea-banner-content">
								<view class="tea-banner-text" style="color:#fff;">
									<text class="tea-banner-title">{{ item.itemArray[0].spu_name }}</text>
									<text class="tea-banner-subtitle">{{ item.itemArray[0].sku_name }}</text>
									<view class="tea-banner-price">¥{{ item.itemArray[0].price_min }}元/份</view>
									<button class="tea-banner-btn"
										@click.stop="toBuyNow(item.itemArray[0])">立即购买</button>
								</view>
							</view>
						</view>
					</view>
					<!-- 其余商品显示为双列网格 -->
					<view v-if="item.itemArray.length > 1" class="products-showcase-section">
						<view class="products-showcase-container">
							<view v-for="(product, productIndex) in item.itemArray.slice(1)" :key="productIndex"
								class="product-showcase-item" @click="toProductDetail(product)">
								<view class="product-showcase-image">
									<image :src="$tools.buildUrl(product.white_back_ground_pic_url)"
										:alt="product.spu_name" />
								</view>
								<view class="product-showcase-content">
									<text class="product-showcase-title">{{ product.spu_name }}</text>
									<text class="product-showcase-desc">{{ product.sku_name }}</text>
									<view class="product-showcase-footer">
										<text class="product-showcase-price">¥{{ product.price_min }}元/份</text>
										<button class="product-showcase-cart-btn" @click.stop="addToCart(product)">
											<image :src="$tools.buildUrl('/static/images//cart-orange.png')" />
										</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else-if="item.show_type===3">
					<!-- 双列模式 -->
					<view class="tea-banner-section-pk-mobile">
						<view class="wrap">
							<view v-for="(product, productIndex) in item.itemArray" :key="productIndex" class="item">
								<image :src="$tools.buildUrl(product.white_back_ground_pic_url)"></image>
								<view class="content">
									<text>{{ product.spu_name }}</text>
									<view class="footer-info">
										<text class="price">¥{{ product.price_min }}</text>
										<view class="tag">GO ></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else-if="item.show_type===4">
					<!-- 单列模式 -->
					<view class="special-tea-section-mobile"
						:style="{backgroundImage: `url(${item.back_ground_image && item.back_ground_image!=''?$tools.buildUrl(item.back_ground_image):$tools.buildUrl(item.itemArray[0].white_back_ground_pic_url)})`}">
						<view class="special-tea-container-mobile">
							<view class="tea-product-card" v-for="(product, productIndex) in item.itemArray"
								:key="productIndex" @click="toProductDetail(product)">
								<view class="product-info">
									<text class="product-title">{{ product.spu_name }}</text>
									<text class="product-description">{{ product.sku_name }}</text>
									<text class="price">¥{{ product.price_min }}</text>
								</view>
								<image :src="$tools.buildUrl(product.white_back_ground_pic_url)"></image>
							</view>
						</view>
					</view>
				</block>
			</block>
		</block>

		<!-- 定制系列 -->
		<view class="product-section container">
			<view class="section-header">
				<text class="section-title">定制系列</text>
				<text class="more-btn" @click="toCustomize">查看更多 >></text>
			</view>
		</view>
		<view class="special-tea-section-mobile">
			<view class="special-tea-container-mobile">
				<view v-for="(product, index) in specialTeaProducts" :key="index" class="tea-product-card"
					@click="toCustomize(product)">
					<view class="product-info">
						<text class="product-title">{{ product.article_title }}</text>
						<text class="product-description">{{ product.article_abstract }}</text>
					</view>
					<block v-if="product.article_images && product.article_images.length>0">
						<image :src="$tools.buildUrl(product.article_images[0].url)"></image>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import UImage from "../../uni_modules/uview-ui/components/u--image/u--image.vue";

	export default {
		components: {
			UImage
		},
		data() {
			return {
				// 搜索关键词
				searchQuery: '',
				// 轮播图数据
				swiperList: [],
				// 移动端产品分类数据
				mobileProductCategories: [],
				// 优惠券
				couponList: [],
				// 热卖产品数据
				teaProducts: [],
				// 新品上市数据
				newProducts: [],
				// 产品系列展示数据
				showcaseProducts: [],
				// 产品定制详情
				specialTeaProducts: []
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo', 'dealerInfo']),

			// 显示的分类（最多10个，分两行）
			displayCategories() {
				return this.mobileProductCategories.slice(0, 10)
			}
		},
		onLoad(options) {
			// 页面加载时的逻辑
			if (options.inviteCode) {
				// 获取页面栈实例数组
				const pages = getCurrentPages();
				// 获取当前页面实例（最后一个元素）
				const currentPage = pages[pages.length - 1];
				// 获取页面路径
				const pagePath = currentPage.route;
				// 带有分销员邀请码
				const inviteCode = options.inviteCode;
				this.$fenxiao.loadNewDirectid(inviteCode, pagePath);
			}
			if (options.dealerCode) {
				// 带有经销商邀请码
				const dealerCode = options.dealerCode;
				const new_company_id = this.$secret.decryptAES(dealerCode);
				this.$fenxiao.loadNewShop(new_company_id);
			}
			// this.checkAndFixLayout();
		},
		onShow() {
			this.loadShopInfo();
			this.loadProductLunBo();
			this.loadProductGroup();
			this.loadProductHot();
			this.loadProductNew();
			this.loadProductHome();
			this.loadArticleList();
			this.loadCouponList();
		},
		onReady() {
			// 页面渲染完成后检查布局
			this.$nextTick(() => {
				// this.checkAndFixLayout();
			});
		},
		methods: {
			// 搜索输入处理
			onSearchInput(e) {
				this.searchQuery = e.detail.value
			},

			// 搜索处理
			onSearch() {
				if (this.searchQuery.trim()) {
					uni.navigateTo({
						url: `/pages/search/search?q=${this.searchQuery}`
					})
				}
			},

			// 获取店铺信息（默认官方）
			loadShopInfo() {
				this.$api.good.GetShopInfo().then(res => {
					// 使用vuex保存登录信息
					res.data.service_config = this.$tools.parseJsonObject(res.data.service_config)
					this.$store.dispatch('updateDealerInfo', res.data)

					// 同时保存到本地存储（兼容性）
					// uni.setStorageSync('dealerInfo', res.data)
				})
			},
			// 获取首页轮播数据
			loadProductLunBo() {
				this.$api.good.GetProductLunBo().then(res => {
					this.swiperList = res.data
				})
			},
			// 获取产品系列
			loadProductGroup() {
				this.$api.good.GetProductGroup({
					group_type: 1
				}).then(res => {
					this.mobileProductCategories = res.data
				})
			},
			// 获取热卖商品
			loadProductHot() {
				this.$api.good.GetProductHot().then(res => {
					this.teaProducts = res.data
				})
			},
			// 获取新品上市
			loadProductNew() {
				this.$api.good.GetProductNew().then(res => {
					this.newProducts = res.data
				})
			},
			// 获取产品系列+热门产品5
			loadProductHome() {
				this.$api.good.GetProductHome().then(res => {
					this.showcaseProducts = res.data
				})
			},
			// 获取产品定制
			loadArticleList() {
				this.$api.good.GetArticleList({
					page: 1,
					limit: 5,
					article_type: 9
				}).then(res => {
					this.specialTeaProducts = res.data
					this.specialTeaProducts.forEach(item => {
						item.article_images = this.$tools.parseJsonObject(item.article_images)
					})
				})
			},
			// 获取优惠券
			loadCouponList() {
				this.$api.coupon.GetPubCouponList({
					page: 1,
					limit: 4
				}).then(res => {
					this.couponList = res.data
				})
			},
			// 跳转到优惠券页面
			toCoupon() {
				uni.navigateTo({
					url: '/pages/user/coupon'
				})
			},

			// 跳转到购物车
			toCart() {
				if (this.isLogin) {
					uni.switchTab({
						url: '/pages/cart/cart'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 跳转到分类页面
			toCategory(category) {
				// uni.switchTab 不能直接通过 URL 传参
				if (category && category.id > 0) {
					uni.setStorageSync('tabCategoryId', category.id)
					uni.switchTab({
						url: `/pages/category/category?id=${category.id}`
					})
				} else {
					uni.switchTab({
						url: '/pages/category/category'
					})
				}
			},
			// 跳转到商品详情
			toProductDetail(product) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${product.id}`
				})
			},
			// 立即购买
			toBuyNow(product) {
				// uni.navigateTo({
				// 	url: `/pages/order/payment?productId=${product.id}&type=buy`
				// })
				if (this.isLogin) {
					uni.navigateTo({
						url: `/pages/product/detail?id=${product.id}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 加入购物车
			addToCart(product) {
				if (this.isLogin) {
					uni.navigateTo({
						url: `/pages/product/detail?id=${product.id}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 跳转到定制页面
			toCustomize(product) {
				if (product && Number(product.id) > 0) {
					uni.navigateTo({
						url: `/pages/service/customize-info?id=${product.id}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/service/customize'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-container {
		width: 100%;
		background-color: #f5f5f5;
		padding-top: calc(var(--status-bar-height) + 88rpx + 40rpx);
		/* 为固定导航栏留出空间 */
	}

	/* 自定义导航栏 */
	.custom-nav {
		background-color: white;
		padding-top: calc(var(--status-bar-height) - 10px);
		padding-bottom: 0;
		padding-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		height: calc(var(--status-bar-height) + 88rpx);
		/* 胶囊按钮标准高度 */
		display: flex;
		align-items: flex-end;
		padding-bottom: 16rpx;
	}

	.nav-left {
		display: flex;
		align-items: center;
		gap: 15rpx;
		height: 56rpx;
		/* 与胶囊按钮高度一致 */
	}

	.menu-icon {
		font-size: 40rpx;
		/* 增大图标尺寸 */
		color: #333;
		font-weight: bold;
	}

	.app-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	/* 搜索框区域 */
	.search-section {
		background-color: white;
		padding: 20rpx 30rpx;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background-color: #f8f9fa;
		border-radius: 50rpx;
		padding-left: 20rpx;
		height: 70rpx;
	}

	.search-icon {
		font-size: 28rpx;
		color: #999;
		margin-right: 15rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.search-btn {
		background-color: #52a58a;
		color: white;
		padding: 13rpx 32rpx;
		border-radius: 40rpx;
		margin-left: 15rpx;
	}

	.search-btn-text {
		font-size: 26rpx;
		padding: 0 8px;
		color: white;
	}

	/* 主横幅 */
	.main-banner {
		margin: 20rpx 30rpx;
	}

	.banner-wrapper {
		background-color: #52a58a;
		/* 绿色底色 */
		border-radius: 24rpx;
		padding: 6rpx;
	}

	.banner-container {
		position: relative;
		width: 100%;
		height: 600rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: white;
	}

	.banner-image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.banner-placeholder {
		width: 100%;
		height: 600rpx;
		background: linear-gradient(135deg, #2c5530 0%, #52a58a 100%);
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.placeholder-text {
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		margin-bottom: 20rpx;
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}

	.placeholder-subtitle {
		font-size: 28rpx;
		color: white;
		opacity: 0.9;
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
	}


	/* 产品展示区域 */
	.product-showcase {
		margin-top: 0;
		padding: 0;
	}

	.showcase-content {
		display: flex;
		min-height: 400rpx;
	}

	/* 产品展示 */
	.carousel-container {
		width: 710rpx;
		margin: 0 auto;
	}

	.main-carousel {
		width: 100%;
		height: 65vh;
	}

	.carousel-item {
		width: 100%;
		height: 100%;
	}

	.carousel-image {
		width: 100%;
		height: 100%;
		object-fit: fill;
		border-radius: 24rpx;
	}

	/* 介绍图片区域 */
	.intro-images-section {
		margin: 40rpx 0;
		padding: 0 40rpx;
	}

	.service-image {
		width: 100%;
		border-radius: 16rpx;
	}

	/* 移动端分类网格 */
	.mobile-category-wrap {
		background-color: white;
		margin: 20rpx;
		border-radius: 24rpx;
		padding: 40rpx 20rpx;
	}

	.category-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}

	.mobile-category-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: calc(20% - 8rpx);
		margin-bottom: 40rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.mobile-category-item .icon-circle {
		background-color: #FFFFFF;
		/* 绿色背景 */
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 100rpx;
		padding: 16rpx;
		margin-bottom: 12rpx;
		// border: 2rpx solid #52a58a;
		/* 金色边框，加粗一号 */
	}

	.mobile-category-item .icon-circle image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.mobile-category-item text {
		font-size: 22rpx;
		color: #333;
		text-align: center;
		line-height: 1.2;
		word-break: break-all;
	}

	/* 优惠券图片区域 */
	.coupon-images-section {
		margin: 40rpx 0;
		padding: 0 40rpx;
	}

	.coupon-images-container {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
	}

	.coupon-card {
		display: flex;
		align-items: center;
		background: linear-gradient(135deg, #f9e79f 0%, #f7dc6f 50%, #f4d03f 100%);
		border-radius: 8px;
		overflow: hidden;
		cursor: pointer;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
		position: relative;
		height: 100px;
		width: 100%;
		border: 1px solid #f1c40f;
		margin-bottom: 5px;
	}

	.coupon-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	}

	.coupon-left {
		flex: 1;
		padding: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.coupon-amount {
		display: flex;
		align-items: baseline;
		margin-bottom: 8px;
	}

	.currency {
		font-size: 16px;
		font-weight: bold;
		color: #d35400;
		margin-right: 2px;
	}

	.amount {
		font-size: 32px;
		font-weight: bold;
		color: #d35400;
		line-height: 1;
	}

	.coupon-condition {
		font-size: 12px;
		color: #8b4513;
		line-height: 1.2;
	}

	.coupon-right {
		background-color: #27ae60;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 18px;
		position: relative;
		border-radius: 0 8px 8px 0;
	}

	.coupon-right::before {
		content: '';
		position: absolute;
		left: -8px;
		top: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		border-right: 8px solid #27ae60;
	}

	.coupon-action {
		color: white;
		font-size: 13px;
		font-weight: bold;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		letter-spacing: 2px;
	}

	/* 容器样式 */
	.container {
		max-width: 2400rpx;
		margin: 0 auto;
		padding: 0 20rpx;
	}

	/* 产品区域通用样式 */
	.product-section {
		margin: 80rpx auto 20rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
	}

	.section-title {
		font-size: 36rpx;
		color: #333;
		margin: 0;
		font-weight: bold;
	}

	.more-btn {
		color: #666;
		font-size: 28rpx;
	}

	/* 茶叶产品展示区域 */
	.tea-products-section {
		padding: 0;
	}

	.tea-products-swiper-container-mobile {
		padding: 0 20rpx;
	}

	.tea-products-swiper-mobile {
		width: 100%;
		height: 700rpx;
	}

	.tea-swiper-item-mobile {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	.tea-swiper-item-mobile .tea-product-card {
		width: 100%;
		height: 100%;
		margin: 0 8rpx;
	}

	.tea-product-card {
		width: 90%;
		height: 700rpx;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		position: relative;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.tea-product-content {
		padding: 40rpx;
		color: white;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
	}

	.tea-product-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
		color: white;
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
		display: block;
	}

	.tea-product-desc {
		font-size: 26rpx;
		line-height: 1.5;
		margin-bottom: 40rpx;
		color: white;
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
		display: block;
	}

	.tea-product-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tea-product-price {
		font-size: 32rpx;
		font-weight: bold;
		color: white;
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
	}

	.tea-product-btn {
		background-color: #f9ecd1;
		color: #000;
		border: none;
		padding: 10rpx 40rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-weight: 500;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
	}

	/* 茶叶产品横幅展示模块 */
	.tea-banner-section {
		padding: 30rpx 20rpx;
	}

	.tea-banner-container {
		width: 100%;
		height: 600rpx;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-radius: 24rpx;
	}

	.tea-banner-content {
		padding: 60rpx 40rpx;
	}

	.tea-banner-text {
		color: white;
	}

	.tea-banner-title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
		line-height: 1.3;
		display: block;
	}

	.tea-banner-subtitle {
		font-size: 28rpx;
		line-height: 1.6;
		margin-bottom: 40rpx;
		opacity: 0.95;
		display: block;
	}

	.tea-banner-price {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	.tea-banner-btn {
		background-color: white;
		color: #333;
		border: none;
		padding: 10rpx 20rpx;
		border-radius: 60rpx;
		font-size: 28rpx;
		font-weight: 600;
		transition: all 0.3s ease;
		width: 300rpx;
	}

	/* 片刻闲系列 */
	.tea-banner-section-pk-mobile {
		background: url("https://oss.wsdns.cn/20250704/e538087482134a9ab8c75f0fd4302715.png");
		border-radius: 24rpx;
		padding: 20rpx 0;
		position: relative;
		background-size: cover;
		background-position: center;
		margin: 0 20rpx;
		min-height: 600rpx;
	}

	.tea-banner-section-pk-mobile .wrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		margin-top: 200rpx;
		padding: 0 20rpx;
	}

	.tea-banner-section-pk-mobile .wrap .item {
		border-radius: 24rpx;
		display: flex;
		align-items: stretch;
		justify-content: center;
		flex-direction: column;
		background: white;
		overflow: hidden;
		box-sizing: border-box;
	}

	.tea-banner-section-pk-mobile .wrap .item image {
		border-radius: 24rpx 24rpx 0 0;
		width: 100%;
		height: 240rpx;
		object-fit: cover;
		display: block;
		flex-shrink: 0;
	}

	.tea-banner-section-pk-mobile .wrap .item .content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		padding: 16rpx;
		width: 100%;
		min-height: 120rpx;
		flex: 1;
	}

	.tea-banner-section-pk-mobile .wrap .item .content text {
		margin: 0 0 12rpx 0;
		font-size: 26rpx;
		color: #333;
		font-weight: bold;
		text-align: center;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tea-banner-section-pk-mobile .wrap .item .content .footer-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 80%;
	}

	.tea-banner-section-pk-mobile .wrap .item .content .price {
		font-size: 26rpx;
		color: #666;
		font-weight: bold;
	}

	.tea-banner-section-pk-mobile .wrap .item .content .tag {
		color: #dbc2a9;
		background-color: black;
		border-radius: 20rpx;
		padding: 6rpx 12rpx;
		font-size: 22rpx;
	}



	/* 产品展示区域样式 */
	.products-showcase-section {
		margin: 20rpx 0;
		padding: 0 20rpx;
	}

	.products-showcase-container {
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}

	.product-showcase-item {
		background: white;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.product-showcase-image {
		width: 100%;
		height: 300rpx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.product-showcase-image image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.3s ease;
		display: block;
	}

	.product-showcase-content {
		padding: 20rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.product-showcase-title {
		font-size: 26rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.product-showcase-desc {
		font-size: 20rpx;
		color: #999;
		line-height: 1.4;
		margin-bottom: 20rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-showcase-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-showcase-price {
		font-size: 26rpx;
		font-weight: bold;
		color: #666;
	}

	.product-showcase-cart-btn {
		background: none;
		border: none;
		padding: 8rpx;
		border-radius: 8rpx;
		transition: background-color 0.3s ease;
	}

	.product-showcase-cart-btn image {
		width: 32rpx;
		height: 32rpx;
	}

	/* 特色茶叶展示区域 */
	.special-tea-section-mobile {
		background: url("https://api.gxwzlbc.com/static/images/customize-img.png");
		border-radius: 24rpx;
		padding: 20rpx;
		position: relative;
		background-size: cover;
		margin: 0 20rpx;
	}

	.special-tea-container-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 200rpx;
	}

	.special-tea-container-mobile .tea-product-card {
		background-color: white;
		border-radius: 24rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		height: auto;
		min-height: 240rpx;
	}

	.special-tea-container-mobile .tea-product-card image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 16rpx;
		flex-shrink: 0;
	}

	.special-tea-container-mobile .tea-product-card .product-info {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
		flex: 1;
		padding: 0 20rpx;
	}

	.special-tea-container-mobile .tea-product-card .product-info .product-title {
		color: #333;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.special-tea-container-mobile .tea-product-card .product-info .product-description {
		color: #999;
		font-size: 24rpx;
		line-height: 1.5;
		max-height: 160rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>